<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<template #top>
			<u-navbar :isBack="true" title="我的优惠券" title-color="#101010"></u-navbar>
			<view style="padding: 8rpx 32rpx;background: #fff;">
				<image src="@/static/icon/yhtop.png" mode="widthFix" style="height: 220rpx;width: 100%;"></image>
			</view>
			<!-- <z-tabs ref="tabs" :list="tabList" :current="tabIndex" @change="changeTab" class="tab-bar" active-color="#FC7404"></z-tabs> -->
		</template>
		
		<view style="padding: 0 32rpx;">
			<view v-for="item in dataList" :key="item.id" style="background: #fff;margin-top: 24rpx;border-radius: 24rpx;">
				<view style="display: flex;align-items: center;position: relative;">
					<view  style="background-size: 100% 100%;width: 180rpx;padding: 20rpx;" 
					:style="{backgroundImage: 'url(' + yhbgImg + ')'}">
						<view style="display: flex;justify-content: center;">
							<view style="background: #52A8F3;border-radius: 16rpx;font-size: 20rpx;padding:2rpx 8rpx;
							width: 45px;color: #fff;">立减券</view>
						</view>
						<view style="width: 100%;text-align: center;color: #fff;font-weight: bold;margin-top: 6px;">
							<text style="font-size: 14px;">￥</text>
							<text style="font-size: 24px;">{{item.amount}}</text>
						</view>
						<view style="text-align: center;font-size: 14px;color: #fff;margin-top: 8rpx;">
							{{item.cl_name}}代金券
						</view>
					</view>
					<view style="margin-left: 24rpx;flex: 1;padding-right: 24rpx;">
						<view style="display: flex;align-items: center;justify-content: space-between;">
							<view style="font-size: 12px;">
								<view style="font-size: 14px;font-weight: bold;">{{item.name}}</view>
								<view style="margin: 4px 0;">有效期至{{formatDateTime(new Date(item.endtime*1000), 'yyyy-MM-dd') }}</view>
								<view style="color: #999999;">限场景使用</view>
							</view>
							<view style="width: 58px;background: linear-gradient(to bottom, #F09C58, #FC7404);
							text-align: center;border-radius: 14px;color: #fff;line-height: 28px;">使用</view>
						</view>
					</view>
					<view v-if="item.isend == 1" style="position: absolute;top: 0;right: 0;background: #FAECEA;border-radius: 0 12px 0 8px;
					color: #E66653;font-size: 10px;padding: 4px 8px;">快过期</view>
				</view>
			</view>
		</view>
		
		<!-- <template #bottom>
			<public-tabbar></public-tabbar>
		</template> -->
	</z-paging>
</template>

<script>
	import { userApi } from '@/common/user.js';
	import configUrl  from '@/common/config/config.js';
	export default {
		name: "Order",
		data() {
			return {
				yhbgImg: configUrl.appurlImg + '/app/icon/yhbg.png',
				
				tabIndex: 0,
				dataList: [],
				tabList: [
					{
						id:0,
						name: '全部',
					}
				]
			};
		},
		onLoad(options) {
			
			let self = this;
			self.getTab();
			
		},
		
		methods: {
			getTab(){
				// userApi.listCouponClass().then(res => {
				// 	console.log(res,'22222')
				// 	this.tabList = res;
				// });
			},
			queryList(pageNo, pageSize) {
				let self = this;
				console.log(pageNo, pageSize);
				let sbumData = {};
				sbumData.page = pageNo;
				sbumData.tabIndex = self.tabIndex;
				userApi.listCoupon({page: pageNo, status: self.tabList[self.tabIndex].id}).then(res => {
					// console.log(res,'22222')
					this.$refs.paging.complete(res);
				});
				// this.$refs.paging.complete([1,2,3,4,5,6,7,8,9]);
			},
			changeTab(index) {
				
			  this.tabIndex = index;
			  this.queryList(1,10);
			},
			formatDateTime(date, format) {
				const o = {
					'M+': date.getMonth() + 1, // 月份
					'd+': date.getDate(), // 日
					'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
					'H+': date.getHours(), // 小时
					'm+': date.getMinutes(), // 分
					's+': date.getSeconds(), // 秒
					'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
					S: date.getMilliseconds(), // 毫秒
					a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
					A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
				};
				if (/(y+)/.test(format)) {
					format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for (let k in o) {
					if (new RegExp('(' + k + ')').test(format)) {
					format = format.replace(
						RegExp.$1,
						RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
					);
					}
				}
				return format;
			},
		},
	};
</script>

<style>
	page{
		background: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
.tab-bar {
  padding: 0 0rpx;
  display: flex;
  justify-content: space-around;
  background-color: #fbfbfb;
  .item-tab {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    &.active {
      color: #fb7601;
      font-size: 28rpx;
      font-weight: bold;
    }
  }
}

.item-order {
  margin: 0 0rpx;
  background-color: #FFF;
  border-radius: 8rpx;
//   & + .item-order {
//     margin-top: 22rpx;
//   }
  .order-header {
    display: flex;
    height: 72rpx;
    line-height: 72rpx;
    flex-direction: row;

	.order-amount-title {
		font-size: 24rpx;
    	color: #858585;
		font-weight: normal;
	}
	.order-amount{
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
		margin-left: 15rpx;
	}
  .order-status {
    display: flex;
    flex-direction: row;
    font-size: 24rpx;
    color: #ff764c;
    width: 750rpx;
    font-weight: bold;
    flex-grow: 1;

  }
	.order-status-text {
      font-size: 24rpx;
      color: #ff764c;
      font-weight: normal;
      margin-left: auto;
    }
  }
  .order-main {
    display: flex;
    flex-direction: column;
    .order-image {
      display: block;
      width: 140rpx;
      height: 140rpx;
      border-radius: 8rpx;
      overflow: hidden;
    }
    .order-main-content {
		display: flex;
	  	flex-direction: row;
		margin-top: 20rpx;
	  .order-main-content-item {
		flex: 1;
		flex-direction: column;
		margin-left: 25rpx;
	  }
    .title {
      font-size: 28rpx;
      font-weight: bold;
    }
    .contacts {
      display: flex;
      flex-direction: row;
      font-size: 24rpx;
      color: #999;
      margin-top: 10rpx;
      line-height: 24rpx;
      align-items: baseline;
		.contacts-text-item {
			margin-right: 10rpx;
		}
		.contacts-medal {
			color: #fb7601;
			background-color: #ffefe2;
			padding: 10rpx;
			border-radius: 10rpx;
			margin-right: 40rpx;
		}
  }
  .extra-tips {
    margin-top: 16rpx;
    font-size: 24rpx;
    color: #ff764c;
  }
  .dot-green {
    width: 15rpx;
    height: 15rpx;
    background-color: #16d692;
    border-radius: 50%;
    color: #16d692;
    align-self: center;
  }
  .dot-black {
    width: 15rpx;
    height: 15rpx;
    background-color: #000;
    border-radius: 50%;
    color: #000;
    align-self: center;
  }
  }
}
  .price-bar {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    padding: 20rpx 0;
    font-size: 24rpx;
    .label {
      margin-left: 20rpx;
    }
    .value {
      font-size: 26rpx;
      font-weight: bold;
    }
  }
  .button-group {
    margin: 10rpx 0;
    display: flex;
    justify-content: flex-end;
	margin-top: 30rpx;
    .item-btn {
      align-self: center;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      padding: 0 20rpx;
      height: 56rpx;
      border: 1px solid #888;
      border-radius: 10rpx;
	  color: #888;
	  font-size: 26rpx;
      & + .item-btn {
        margin-left: 22rpx;
      }

      &.primary {
        color: #FFF;
        border: 1px solid #fb7601;
		background-color: #fb7601;
      }
    }
  }
}
</style>
